<template>
    <div class="tableRow">
        <el-row class="select-list" v-permission="'system:logs:query'">
            <el-form :inline="true" ref="selectForm" :model="selectFormModel" :label-position="'right'"
                     label-width="80px" size="mini">
                <el-form-item label="操作模块" prop="title">
                    <el-input v-model="selectFormModel.title" placeholder="操作模块" style="width: 200px" clearable
                              @keyup.enter.native="onSearch"/>
                </el-form-item>
                <el-form-item label="操作人员" prop="operName">
                    <el-input v-model="selectFormModel.operName" placeholder="操作人员" style="width: 200px" clearable
                              @keyup.enter.native="onSearch"/>
                </el-form-item>
                <el-form-item label="操作类型" prop="businessType">
                    <el-select value="" v-model="selectFormModel.businessType" placeholder="操作类型" style="width: 200px">
                        <el-option label="新增" value="1"/>
                        <el-option label="修改" value="2"/>
                        <el-option label="删除" value="3"/>
                        <el-option label="授权" value="4"/>
                        <el-option label="导出" value="5"/>
                        <el-option label="导入" value="6"/>
                        <el-option label="强退" value="7"/>
                        <el-option label="生成代码" value="8"/>
                        <el-option label="清空数据" value="9"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作状态" prop="status">
                    <el-select value="" v-model="selectFormModel.status" placeholder="操作状态" style="width: 200px">
                        <el-option label="成功" value="0"/>
                        <el-option label="失败" value="1"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                               @click="onRefreshSelectForm">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="toolbar">
            <el-button type="danger" icon="el-icon-delete" :disabled="dialog.isBatchRemoveDisabled" size="mini" plain
                       @click="handleBatchDelete" v-permission="'system:logs:remove'"> 删除
            </el-button>
            <el-button type="danger" icon="fa fa-remove" size="mini" @click="handleClean"
                       v-permission="'system:logs:clean'"> 清空
            </el-button>
            <el-button type="warning" icon="fa fa-download" size="mini" plain @click="handleExport"
                       v-permission="'system:logs:export'"> 导出
            </el-button>
        </el-row>
        <data-table ref="dataTable"
                    :api="getLogsList"
                    :options="options"
                    :columns="columns"
                    :operates="operates"
                    :query="selectFormModel"
                    @handleSelectionChange="handleSelectionChange"
        />
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.dialogVisible"
                   :modal-append-to-body="false"
                   :destroy-on-close="false"
                   width="600px">
            <el-row class="text item">
                <el-col :span="4">
                    操作模块：
                </el-col>
                <el-col :span="20">
                    <span> {{dialog.row.title+" / "+businessType(dialog.row)}}</span>
                </el-col>
            </el-row>
            <el-row class="text item">
                <el-col :span="4">
                    登录信息：
                </el-col>
                <el-col :span="20">
                    <span> {{dialog.row.operName+" / "+dialog.row.operIp+" / "+dialog.row.operLocation}}</span>
                </el-col>
            </el-row>
            <el-row class="text item">
                <el-col :span="4">
                    请求地址：
                </el-col>
                <el-col :span="20">
                    <span>{{dialog.row.requestMethod}} {{dialog.row.operUrl}}</span>
                </el-col>
            </el-row>
            <el-row class="text item">
                <el-col :span="4">
                    操作方法：
                </el-col>
                <el-col :span="20">
                    <span> {{dialog.row.method}}</span>
                </el-col>
            </el-row>
            <el-row class="text item">
                <el-col :span="4">
                    请求参数：
                </el-col>
                <el-col :span="20">
                    <el-alert
                            :title="dialog.row.operParam"
                            :closable="false"
                            type="info">
                    </el-alert>
                </el-col>
            </el-row>
            <el-row class="text item" v-if="dialog.row.status===0">
                <el-col :span="4">
                    返回结果：
                </el-col>
                <el-col :span="20">
                    <el-alert
                            :title="dialog.row.jsonResult"
                            :closable="false"
                            type="info">
                    </el-alert>
                </el-col>
            </el-row>

            <el-row class="text item" v-else>
                <el-col :span="4">
                    错误信息：
                </el-col>
                <el-col :span="20">
                    <el-alert
                            :title="dialog.row.errorMsg"
                            :closable="false"
                            type="info">
                    </el-alert>
                </el-col>
            </el-row>
            <el-row class="text item">
                <el-col :span="4">
                    状态：
                </el-col>
                <el-col :span="8">
                    <el-tag v-if="dialog.row.status===0" type="success"> 成功</el-tag>
                    <el-tag v-else type="danger"> 失败</el-tag>
                </el-col>
                <el-col :span="4">
                    耗时：
                </el-col>
                <el-col :span="8">
                    <el-tag v-if="dialog.row.processingTime<=100" type="success"> {{dialog.row.processingTime}} ms
                    </el-tag>
                    <el-tag v-else-if="dialog.row.processingTime<=500" type="warning"> {{dialog.row.processingTime}}
                        ms
                    </el-tag>
                    <el-tag v-else type="danger"> {{dialog.row.processingTime}} ms</el-tag>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.dialogVisible  = false" size="medium">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import { Component, Ref, Vue } from 'vue-property-decorator';
    import DataTable from '@/components/DataTable/DataTable.vue';
    import { cleanLogs, exportLogs, getLogsList, removeLogs } from '@/api/logs';

    @Component({
        components: {
            DataTable
        }
    })
    export default class Logs extends Vue {
        @Ref('dataTable') private dataTable: any;
        @Ref('selectForm') private selectForm: any;
        private getLogsList: Function = getLogsList;
        /*搜索框*/
        selectFormModel: any = {
            title: '',
            operName: '',
            businessType: '',
            status: '',
        };
        dialog: any = {
            dialogVisible: false,
            isBatchRemoveDisabled: true,
            title: '对话框',
            formData: [],
            row: ''
        };
        // table 的参数
        options: any = {
            stripe: true, // 是否为斑马纹 table
            loading: true, // 是否添加表格loading加载动画
            highlightCurrentRow: true, // 是否支持当前行高亮显示
            multipleSelect: true, // 是否支持列表项选中功能
        };
        operates: any = {
            width: 'auto',
            fixed: 'right',
            list: [
                {
                    label: '详情',
                    type: 'warning',
                    icon: 'el-icon-search',
                    disabled: (index, row) => {
                        return false;
                    },
                    method: (index, row) => {
                        this.dialog.dialogVisible = true;
                        this.dialog.row = row;
                        this.dialog.title = '操作日志详情';
                    }
                }
            ]
        };
        columns: any = [
            {label: 'ID', prop: 'id', sortable: 'custom'},
            {label: '系统模块', prop: 'title', sortable: 'custom'},
            {
                label: '业务类型', prop: 'businessType', sortable: 'custom', render: function (createElement, row) {
                    if (row && row.row && row.row.businessType === 1) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'success'
                                }
                            }, ['新增']
                        );
                    } else if (row && row.row && row.row.businessType === 2) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'success'
                                }
                            }, ['修改']
                        );
                    } else if (row && row.row && row.row.businessType === 3) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'warning'
                                }
                            }, ['删除']
                        );
                    } else if (row && row.row && row.row.businessType === 4) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'success'
                                }
                            }, ['授权']
                        );
                    } else if (row && row.row && row.row.businessType === 5) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'info'
                                }
                            }, ['导出']
                        );
                    } else if (row && row.row && row.row.businessType === 6) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'info'
                                }
                            }, ['导入']
                        );
                    } else if (row && row.row && row.row.businessType === 7) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'warning'
                                }
                            }, ['强退']
                        );
                    } else if (row && row.row && row.row.businessType === 8) {
                        return createElement('el-tag', {}, ['生成代码']
                        );
                    } else if (row && row.row && row.row.businessType === 9) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'warning'
                                }
                            }, ['清空数据']
                        );
                    } else {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'danger'
                                }
                            }, ['其他']
                        );
                    }
                }
            },
            {label: '操作人员', prop: 'operName', sortable: 'custom'},
            {label: '部门', prop: 'deptName', sortable: 'custom'},
            {label: '主机', prop: 'operIp', sortable: 'custom'},
            {label: '操作地点', prop: 'operLocation', sortable: 'custom'},
            {
                label: '操作状态', prop: 'status', sortable: 'custom', render: function (createElement, row) {
                    if (row && row.row && row.row.status === 0) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'success'
                                }
                            }, ['成功']
                        );
                    } else if (row && row.row && row.row.status === 1) {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'danger'
                                }
                            }, ['失败']
                        );
                    } else {
                        return createElement('el-tag', {
                                attrs: {
                                    type: 'danger'
                                }
                            }, ['未知']
                        );
                    }
                }
            },
            {label: '操作时间', prop: 'operTime', sortable: 'custom'},
        ];

        /*搜索*/
        onSearch(): void {
            this.dataTable.refresh();
        }

        /*重置*/
        onRefreshSelectForm(): void {
            //恢复搜索默认信息
            this.selectForm.resetFields();
            this.onSearch();
        }


        /*批量删除*/
        handleBatchDelete(): void {
            this.$confirm('确定要删除选定的操作日志吗？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ids: Array<any> = [];
                this.dialog.formData.forEach((item, index) => {
                    ids[index] = item.id;
                });
                return removeLogs({'ids': ids});
            }).then((response: any) => {
                this.dataTable.refresh();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*清空*/
        handleClean(): void {
            this.$confirm('确定要清空所有操作日志吗？【此操作不可逆】', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(() => {
                return cleanLogs();
            }).then((response: any) => {
                this.dataTable.refresh();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*导出excel*/
        handleExport(): void {
            this.$confirm('确定要导出当前查询的所有操作日志吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                this.selectFormModel.pageNum = null;
                this.selectFormModel.pageSize = null;
                this.selectFormModel.orderByColumn = 'id';
                this.selectFormModel.isAsc = 'asc';

                return exportLogs(this.selectFormModel);
            }).then((response: any) => {
                console.log(response);
                if (response && response.data) {
                    (this as any).$download(response.data.fileName);
                }
            }).catch((e) => {
                console.log(e);
            });
        }

        /*选中事件*/
        handleSelectionChange(val): void {
            if (val) {
                this.dialog.isBatchRemoveDisabled = val.length <= 0;
                this.dialog.isBatchEditDisabled = val.length !== 1;
            }
            this.dialog.formData = val;
        }

        businessType(row: any) {
            if (row && row.businessType === 1) {
                return '新增';
            } else if (row && row.businessType === 2) {
                return '修改';
            } else if (row && row.businessType === 3) {
                return '删除';
            } else if (row && row.businessType === 4) {
                return '授权';
            } else if (row && row.businessType === 5) {
                return '导出';
            } else if (row && row.businessType === 6) {
                return '导入';
            } else if (row && row.businessType === 7) {
                return '强退';
            } else if (row && row.businessType === 8) {
                return '生成代码';
            } else if (row && row.businessType === 9) {
                return '清空数据';
            } else {
                return '其他';
            }
        }
    }
</script>

<style scoped lang="scss">
    .tableRow {
        .el-dialog__body {
            .text {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
            }

            .item {
                margin-bottom: 18px;
            }
        }
    }

</style>

